   * {
       margin: 0px;
       padding: 0px;
   }

   body {
       background: #3FC1C9;
   }

   .cavans-con {
       width: 500px;
       height: 500px;
       position: absolute;
       top: 50%;
       left: 50%;
       margin-left: -400px;
       margin-top: -300px;
       background: #fff;
       box-shadow: 0 0 5px 2px #00ADB5;
   }

   .pen {
       cursor: url("../img/pen.ico"), pointer;
   }

   .eraser {
       cursor: url("../img/eraser.ico"), pointer;
   }

   .title {
       font-size: 30px;
       text-align: center;
       margin-top: 10px;
   }
   .problem {
       text-align: center;
       font-size: 20px;
       margin-top: 10px;
   }

   .tool-con {
       position: absolute;
       width: 100%;
       bottom: 70px;
       text-align: center;
   }

   .btn {
       cursor: pointer;
       display: inline-block;
       margin-right: 10px;
   }

   .btn img {
       width: 30px;
       vertical-align: middle;
   }

   .btn-claerCanvas,
   .btn-pen,
   .btn-eraser {
       padding: 5px;
       box-shadow: 0 0 4px 1px #00ADB5;
       color: #fff;
   }

   .btn:active {
       background: #00ADB5;
   }
   .tool-con  span{
    color: #fff;
   }
   .tool-con .pen-width-con ul {
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .tool-con .pen-width-con {
       margin-top: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .tool-con .pen-width-con ul li {
      list-style: none;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
   }
   .tool-con .pen-width-con ul li div{
       width: 2px;
       height: 2px;
       background: #000;
       border-radius: 50%;
       cursor: pointer;
   }
   .tool-con .pen-width-con ul li:nth-child(2) div {
       width: 4px;
       height: 4px;
   }
    .tool-con .pen-width-con ul li:nth-child(3) div {
       width: 6px;
       height: 6px;
   }
    .tool-con .pen-width-con ul li:nth-child(4) div {
       width: 8px;
       height: 8px;
   }
    .tool-con .pen-width-con ul li:nth-child(5) div {
       width: 10px;
       height: 10px;
   }
   .width-select {
    box-shadow: 0 0 4px 1px #00ADB5;
   }
   .pen-color-con {
       margin-top: 10px;
   }

   /*聊天框*/
   .talk-con {
       position: absolute;
       width: 300px;
       height: 500px;
       top: 50%;
       margin-top: -300px;
       background-color: #fff;
       right: 20px;
   }
   .input-con {
       width: 100%;
       position: absolute;
       background: red;
       height: 40px;
       display: flex;
       bottom: 0px;
       border-top: 1px solid #ccc;
   }
   .input-con input {
       border: none;
       height: 100%;
       width: 80%;
       text-indent: 10px;
       outline: none;
   }
   .input-con button {
      border: none;
      height: 100%;
      width: 20%;
      outline: none;
      cursor: pointer;
   }
   .input-con button:active {
       background-color: #eee;
   }
   .talk-show {
       width: 100%;
       position: absolute;
       top: 0px;
       bottom: 41px;
       overflow-y: auto;
   }
   .talk-show .talk {
    padding: 5px 5px;
   }
   /*人员列表*/
   .persion-con {
      position: absolute;
      left: 20px;
      top: 50%;
      margin-top: -300px;
      width: 300px;
      height: 500;
   }
   .persion-con .persion {
       width: 120px;
       height: 120px;
       background: #fff;
       border-radius: 50%;
       font-size: 20px;
       display: flex;
       justify-content: center;
       align-items: center;
       text-align: center;
       padding: 5px 5px;
       margin-top: 20px;
   }
   .persion-con .select {
       border: 2px solid red;
       position: relative;
   }
   .persion-con .select::after {
       content: ' ';
       border-top: 20px solid rgba(0,0,0,0);
       border-left: 20px solid red;
       position: absolute;
       right: -40px;
       top: 50%;
       margin-top: -5px;
       transform: rotate(45deg);
   }
